import { Card, Table } from 'antd';
import { nanoid } from 'nanoid'
import { useState } from 'react';



const AvatarList = (props) => {
  const { loading } = props
  const columns = [
    {
      title: '序号',
      render: (text, record, index) => `${(pageOption.pageNo - 1) * pageOption.pageSize + (index + 1)}`,
      width: '10%',
      key: "index"
    },
    {
      title: '股东名称',
      dataIndex: 'name',
      width: '70%',
      textWrap: 'word-break',
      ellipsis: true,
      key: "holderName"
    },
    {
      title: '持股比例',
      dataIndex: 'percent',
      width: '20%',
      render: (text, record, index) => (text * 100).toFixed(2) + '%',
      defaultSortOrder: 'descend',
      sortDirections: ['descend', 'ascend'],
      sorter: (a, b) => a.percent - b.percent,
      key: "holderPercent"
    },
  ];
  //数据源
  const dataSource = props.holders;

  //分页默认值
  const [pageOption, setPageOption] = useState({
    pageNo: 1,
    pageSize: 10,
  })

  //分页配置
  const paginationProps = {
    current: pageOption.pageNo,
    pageSize: pageOption.pageSize,
    onChange: (current, size) => paginationChange(current, size)
  }

  const paginationChange = async (current, size) => {
    setPageOption({
      pageNo: current,
      pageSize: size,
    })
  }
  return (
    <>
      <Table
        loading={loading}
        size='small'
        dataSource={dataSource}
        columns={columns}
        pagination={paginationProps}
        rowKey={nanoid()}
      ></Table>
    </>
  );
};

export default AvatarList;
